{extend name="../../admin/view/main"}

{block name='content'}

<div class="think-box-shadow portal-block-container notselect">
    {include file='shop/report/index_search'}

    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md4">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)">
                <div>投资总量</div>
                <div>{$goodsOrderTotal|default='0'}</div>
                <div>当前产品的投资数量</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-app"></i>
        </div>
        <div class="layui-col-sm12 layui-col-md4">
            <div class="portal-block-item nowrap" data-action-blur="" style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)">
                <div>投资金额</div>
                <div>{$goodsAmountTotal|default='0'}</div>
                <div>当前投资总金额</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
        <div class="layui-col-sm12 layui-col-md4">
            <div class="portal-block-item nowrap" style="background:linear-gradient(-141deg,#ecca1b,#f39526)">
                <div>预计利息总额</div>
                <div>{$goodsLxjeTotal|default='0.00'}</div>
                <div>当前投资预计利息总额</div>
            </div>
            <i class="portal-block-icon layui-icon layui-icon-rmb"></i>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15 margin-top-10">

    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main_pie" style="width:100%;height:350px"></div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md6">
        <div class="think-box-shadow">
            <div id="main_bar" style="width:100%;height:350px"></div>
        </div>
    </div>
</div>

<script>

    require(['echarts'], function (echarts) {

        var xs = ['投资总额', '利息总额'];

        var xs_data = ["{$goodsAmountTotal|default='0.00'}", "{$goodsLxjeTotal|default='0.00'}"];

        var xs_pie = [
            {'name':'投资总额', 'value':"{$goodsAmountTotal|default='0.00'}"},
            {'name':'利息总额', 'value':"{$goodsLxjeTotal|default='0.00'}"},
        ]

        var chart2 = echarts.init(document.getElementById('main_pie'));
        window.addEventListener("resize", function () {
            chart2.resize()
        });
        chart2.setOption({
            title: {text: '投资金额与利息统计', left: 'center'},
            legend: {orient: 'vertical', left: 'left'},
            tooltip: {trigger: 'item', formatter: '{a} <br/>{b} : {c} 元 ( {d}% )'},
            series: [
                {
                    name: '用户等级',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '55%'],
                    data: xs_pie,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

        (function (charts) {
            window.addEventListener("resize", function () {
                charts.resize()
            });
            charts.setOption({
                title: [{left: 'center', text: '投资金额与利息统计'}],
                tooltip: {trigger: 'axis', show: true, axisPointer: {type: 'cross', label: {}}},
                xAxis: [{data: xs, gridIndex: 0}],
                yAxis: [
                    {
                        splitLine: {show: true}, gridIndex: 0, type: 'value', axisLabel: {
                            formatter: '{value} 元'
                        }
                    }
                ],
                grid: [{left: '10%', right: '3%', top: '25%'}],
                series: [
                    {
                        smooth: true,
                        areaStyle: {color: 'rgba(180, 180, 180, 0.5)'},
                        showSymbol: true, xAxisIndex: 0, yAxisIndex: 0,
                        label: {normal: {position: 'top', formatter: '{c} 元', show: true}},
                        type: 'bar',
                        barWidth:80,
                        data: xs_data,
                    }
                ]
            });
        })(echarts.init(document.getElementById('main_bar')));
    });
</script>

{/block}
